<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="UTF-8">
  <title>使用Vue实现登录窗口动画</title>
  <style>
    /* 登录窗口样式 */
    .login-window {
      width: 300px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    /* 登录按钮样式 */
    button {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    /* 过渡效果样式 */
    .login-enter-active,
    .login-leave-active {
      transition: all 0.5s;
    }

    .login-enter,
    .login-leave-to {
      opacity: 0;
      transform: translateY(-50px);
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 登录按钮 -->
    <button @click="toggleLogin">(按钮)登录界面显示</button>
    <!-- 登录窗口的过渡效果 -->
    <transition name="login">
      <div v-if="showLogin" class="login-window">
        <h2>登录</h2>
        <form>
          <label for="username">用户名:</label>
          <input type="text" id="username" name="username">
          <br>
          <label for="password">密码:</label>
          <input type="password" id="password" name="password">
        </form>
        <button @click="toggleLogin">关闭</button>
      </div>
    </transition>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        showLogin: false
      },
      methods: {
        toggleLogin() {
          this.showLogin = !this.showLogin;
        }
      }
    });
  </script>
</body>
</html>